<template>
  <el-form ref="form" class="login_container apple-style" :model="login" status-icon :rules="rules" label-width="70px">
    <h3 class="login_title">用户登录</h3>
    <el-form-item label="用户名" prop="username">
      <el-input v-model="login.number" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="login.pass" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="submit" type="primary" class="apple-button">登录</el-button>
    </el-form-item>
    <router-link to="/reg" class="register-link">没有账号立即注册</router-link>
  </el-form>
</template>

<script>

import {login} from "@/api";


export default {
    data() {
        return {
          usermnu:[
            // {
            //   path: '/short',
            //   name: 'short',
            //   label: '首页',
            //   icon: 's-home',
            //   url: 'short.vue'
            // },
            {
              path: '/subvidoe',
              name: 'upvideo',
              label: '投稿视频',
              icon: 's-home',
              url: 'upvideo/upvideo.vue'
            },
            {
              path: '/infor:id',
              name: 'infor',
              label: '个人信息',
              icon: 'user',
              url: 'user/index.vue'
            },

            {
              path: '/video',
              name: 'video',
              label: '视频管理',
              icon: 'video-play',
              url: 'Video.vue'
            },


          ],
          menu: [
            // {
            //   path: '/short',
            //   name: 'short',
            //   label: '客户端首页',
            //   icon: 's-home',
            //   url: 'short.vue'
            // },
            {
              path: '/subvidoe',
              name: 'upvideo',
              label: '投稿视频',
              icon: 's-home',
              url: 'upvideo/upvideo.vue'
            },
            {
              path: '/infor:id',
              name: 'infor',
              label: '个人信息',
              icon: 'user',
              url: 'user/index.vue'
            },
            {
              path: '/checkv',
              name: 'checkvideo',
              label: '视频审核',
              icon: 'warning',
              url: 'upvideo/subvideo'
            },
            {
              path: '/user',
              name: 'user',
              label: '用户管理',
              icon: 'user',
              url: 'User.vue'
            },
            {
              path: '/warn',
              name: 'warn',
              label: '告警列表',
              icon: 'warning',
              url: 'Warn.vue'
            },
            {
              path: '/video',
              name: 'video',
              label: '视频管理',
              icon: 'video-play',
              url: 'Video.vue'
            },
            {
              path: '/img',
              name: 'img',
              label: '图片管理',
              icon: 'video-play',
              url: 'Img.vue'
            },
            {
              label: 'AI系统',
              icon: 'location',
              children: [
                {
                  path: '/page1',
                  name: 'page1',
                  label: '视频识别',
                  icon: 'setting',
                  url: 'PageOne.vue'
                },
                {
                  path: '/page2',
                  name: 'page2',
                  label: '图像识别',
                  icon: 'setting',
                  url: 'PageTwo.vue'
                }

              ]
            }
          ],
            // 登陆数据
            login: {
                number: 'admin',
                pass: 'admin123'
            },
            // 校验规则
            rules: {
              number: [{ required: 'true', message: '请输入用户名', trigger: 'blur' }],
              pass: [{ required: 'true', message: '请输入密码', trigger: 'blur' }]
            }
        }
    },
    methods: {
        submit() {

          //  表单的校验
            this.$refs.form.validate((valid) => {

                if (valid) {
            login({...this.login}).then((data)=>{
              if (data.data.code===200){
                this.$cookies.set("user",data.data.data)
                // return value
              //  console.log(data.data.data)
                if(data.data.data.isAdmin===1){
                  this.$store.commit('setMenu',this.menu)
                  // 动态添加路由
                  this.$store.commit('addMenu',this.$router)

                  // 跳转到首页
                }else{
                 this.$store.commit('setMenu',this.usermnu)
                  // 动态添加路由
                  this.$store.commit('addMenu',this.$router)

                }

                // 跳转到首页
                this.$router.push("/client")
                  this.$message.success('登录成功')
              }else{
                this.$message.error(data.data.data.message)
              }
                  })


                    //传入表单数据
                    // getMenu(this.login).then((data) => {
                    //     // console.log(data);
                    //     if(data.data.code===200){
                    //         // 记录cookie

                    //         // 设置菜单
                    //         this.$store.commit('setMenu',data.data.data.menu)
                    //         // 动态添加路由
                    //         this.$store.commit('addMenu',this.$router)
                    //         // 跳转到首页
                    //         this.$router.push('/home')
                    //     }else{
                    //         // 验证失败的弹窗
                    //         this.$message.error(data.data.data.message);
                    //     }
                    // })
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.login_container {
    width: 350px;
    border: 1px solid #eaeaea;

    // 居中
    margin: 180px auto;

    padding: 35px 35px 15px 35px;

    // 让padding在width里面
    box-sizing: border-box;

    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 0 25px #cac6c6;

    .login_title {
        color: #505458;
        // 左右居中
        text-align: center;
        margin-bottom: 40px;
    }

    .el-input {
        width: 198px;
    }
}

.apple-style {
  background-color: #f0f8ff;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: 'San Francisco', sans-serif;
}

.login_title {
  color: #007acc;
  text-align: center;
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input__inner {
  border-radius: 15px;
  border: 1px solid #dcdcdc;
}

.el-button--primary {
  background-color: #007acc;
  border-color: #007acc;
  border-radius: 15px;
  transition: transform 0.2s;
}

.el-button--primary:hover {
  transform: scale(1.05);
}

.register-link {
  display: block;
  text-align: center;
  margin-top: 20px;
  color: #007acc;
  text-decoration: none;
}

.register-link:hover {
  text-decoration: underline;
}
</style>